<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i> 后台管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/zwt/index' }">主页</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top:40px">
      <el-row :gutter="10" style="margin-bottom: 60px">
        <el-col :span="6">
          <el-card style="color: #409EFF">
            <div><i class="el-icon-user-solid" /> 用户总数</div>
            <div style="padding: 10px 0; text-align: center; font-weight: bold">
              {{ total }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="color: #F56C6C">
            <div><i class="el-icon-money"/> 销售总量</div>
            <div style="padding: 10px 0; text-align: center; font-weight: bold">
              {{ orderSale }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="color: #67C23A">
            <div><i class="el-icon-bank-card" /> 评论数量</div>
            <div style="padding: 10px 0; text-align: center; font-weight: bold">
               300000
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="color: #E6A23C">
            <div><i class="el-icon-s-shop" /> 酒店排名</div>
            <div style="padding: 10px 0; text-align: center; font-weight: bold">
              3
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div ref="lineChart" style="width: 500px; height: 450px"></div>
        </el-col>

        <el-col :span="12">
          <div ref="pieChart" style="width: 500px; height: 400px"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import request from "@/utils/request";

export default {
  name: "Home",
  data() {
    return {
      request: request, // 引入并定义request属性
      total: 0,
      orderSale:0,
      lineOption: {
        title: {
          text: '各季度用户数量统计',
          subtext: '趋势图',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ["第一季度", "第二季度", "第三季度", "第四季度"]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line'
          },
          {
            data: [],
            type: 'bar'
          }
        ]
      },
      pieOption: {
        title: {
          text: '各季度用户住房数量统计',
          subtext: '比例图',
          left: 'center',
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '70%',
            label: {
              normal: {
                show: true,
                position: 'inner',
                textStyle: {
                  fontWeight: 300,
                  fontSize: 14,
                  color: "#fff"
                },
                formatter: '{d}%'
              }
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    var lineChart = echarts.init(this.$refs.lineChart);
    var pieChart = echarts.init(this.$refs.pieChart);

    this.request.get("http://localhost:29666/echarts/members").then(res => {
      this.total = res.data.reduce((total, num) => total + num, 0);
      this.lineOption.xAxis.data = ["第一季度", "第二季度", "第三季度", "第四季度"];
      this.lineOption.series[0].data = res.data;
      this.lineOption.series[1].data = res.data;
      lineChart.setOption(this.lineOption);

      this.pieOption.series[0].data = [
        { name: "第一季度", value: res.data[0] },
        { name: "第二季度", value: res.data[1] },
        { name: "第三季度", value: res.data[2] },
        { name: "第四季度", value: res.data[3] },
      ]
      pieChart.setOption(this.pieOption);
    });
  },
  created() {
    this.axios.get("http://localhost:9999/table/main").then((response) => {
      this.orderSale = response.data.data[0].orderSale;
      console.log(this.orderSale)
    });
  }
}
</script>
